
@for $i from 1 through 10 {
  $v: $i * 5;

  @each $type in w, h, br {
    // width
    @if $type == w {
      [w#{$v}] {
        width: #{$v}px;
      }
    }
    // height
    @if $type == h {
      [h#{$v}] {
        height: #{$v}px;
      }
    }
  }

  // padding
  @each $type in p, pl, pr, pt, pb, ptb, plr {
    @if $type == p {
      [p#{$v}] {
        padding: #{$v}px;
      }
    }

    @else if $type == pl {
      [pl#{$v}] {
        padding-left: #{$v}px;
      }
    }

    @else if $type == pb {
      [pb#{$v}] {
        padding-bottom: #{$v}px;
      }
    }

    @else if $type == pt {
      [pt#{$v}] {
        padding-top: #{$v}px;
      }
    }

    @else if $type == pb {
      [pb#{$v}] {
        padding-bottom: #{$v}px;
      }
    }

    @else if $type == ptb {
      [ptb#{$v}] {
        padding-top: #{$v}px;
        padding-bottom: #{$v}px;
      }
    }

    @else if $type == plr {
      [plr#{$v}] {
        padding-right: #{$v}px;
        padding-left: #{$v}px;
      }
    }
  }

  // margin
  @each $type in m,ml,mr,mt,mb,mtb,mlr {
    @if $type == m {
      [m#{$v}] {
        margin: #{$v}px;
      }
    }

    @else if $type == ml {
      [ml#{$v}] {
        margin-left: #{$v}px;
      }
    }

    @else if $type == mr {
      [mr#{$v}] {
        margin-right: #{$v}px;
      }
    }

    @else if $type == mt {
      [mt#{$v}] {
        margin-top: #{$v}px;
      }
    }

    @else if $type == mb {
      [mb#{$v}] {
        margin-bottom: #{$v}px;
      }
    }

    @else if $type == mtb {
      [mtb#{$v}] {
        margin-top: #{$v}px;
        margin-bottom: #{$v}px;
      }
    }

    @else if $type == mlr {
      [mlr#{$v}] {
        margin-right: #{$v}px;
        margin-left: #{$v}px;
      }
    }
  }
}
